<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script>
      const myCanvas = document.querySelector("#myCanvas");
      const context = myCanvas.getContext("2d");
      myCanvas.setAttribute('width',document.documentElement.clientWidth)
      myCanvas.setAttribute('height',document.documentElement.clientHeight)

      class edge {
        constructor(x, y, width, height, dy, dx) {
          this.x = x;
          this.y = y;
          this.width = width;
          this.height = height;
          this.dy = dy;
          this.dx = dx;
        }
        draw() {
          context.clearRect(0, 0, myCanvas.width, myCanvas.height);
          context.beginPath();
          context.rect(this.x, this.y, this.width, this.height);
          context.fillStyle = "red";
          context.font = "30px sans-serif";
          context.globalCompositeOperation = "lighter";
          context.fillText("zzzks", this.x, this.y + 50);

          context.fillStyle = "blue";
          context.fill();
        }
        move() {
          if (this.width + this.x > myCanvas.width || this.x < 0) {
            this.dx *= -1;
          } else if (this.height + this.y > myCanvas.height || this.y < 0) {
            this.dy *= -1;
          }
          this.x += this.dx;
          this.y += this.dy;
        }
      }
      const rect = new edge(0, 0, 100, 100, 2, 2);

      function animate() {
        rect.draw();
        rect.move();
        requestAnimationFrame(animate);
      }
      animate();
    </script>
  </body>
</html>
